<script setup lang="ts">
defineOptions({
  name: "detailListInfo"
});

import { ref, computed, markRaw } from "vue";
import { PxMessage } from "px-ui";
import { Time } from "@px-ui/icons-vue";
import commonTable from "@/views/common/components/commonTable/index.vue";
import { useTableCloumns } from "./hooks";
import add from "./add.vue";
import associationAnalysis from "./associationAnalysis.vue";

const props = withDefaults(defineProps<{ loading: boolean }>(), { loading: false });

const commonTableRef = ref<InstanceType<typeof commonTable> | null>(null);
const commonTableKey = ref<string>(Math.random().toString(36).slice(2, 10));
const data = ref<Array<Record<string, any>>>([]);
const isShowAddDialog = ref<boolean>(false);
const filterData = ref<Array<Record<string, any>> | null>(null);

const emits = defineEmits(["submit"]);

const operationOptions: Array<CommonTable.operationOptionItemType> = [
  {
    content: "操作",
    icon: markRaw(Time),
    disabled: true,
    click: (scope: any) => doSomeThing(scope)
  }
];

const tableCloumns = computed(() => useTableCloumns());

const doSomeThing = (scope: any) => {
  console.log("scope   ", scope);
};

const createOrder = () => {
  if (filterData.value) {
    isShowAddDialog.value = true;
  } else {
    PxMessage.error("请选择设备位号！！");
  }
};

const associationAnalysisRef = ref<InstanceType<typeof associationAnalysis> | null>(null); //关联分析组件
const relatedAnalysis = () => {
  if (associationAnalysisRef.value) {
    associationAnalysisRef.value.handleOpen();
  }
};

const getRowKey = row => {
  return row.subEqpId;
};

const spanMethod = ({ row, column, rowIndex, columnIndex }: CommonTable.CellType) => {
  if (columnIndex === 0) {
    if (rowIndex % row.len === 0) {
      return {
        rowspan: row.len,
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  } else if (columnIndex === 1) {
    if (rowIndex % row.len === 0) {
      return {
        rowspan: row.len,
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  } else if (columnIndex === tableCloumns.value.length + 1) {
    if (rowIndex % row.len === 0) {
      return {
        rowspan: row.len,
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
};

const selectionChangeHandler = val => {
  filterData.value = null;
  if (val?.length) {
    const { index, len } = val.slice(-1)[0];
    filterData.value = data.value.slice(index, index + len);
  }
};

const submitHandler = () => {
  emits("submit");
};

const initData = async (arr: Array<any>) => {
  let index = 0;
  data.value = arr.reduce((pre, cur) => {
    const { typeId, eqpId, eqpName, positionNameAll, subEquipments } = cur;
    const arr = subEquipments?.map(item => {
      item["index"] = index;
      index++;
      item["len"] = subEquipments.length;
      item["typeId"] = typeId;
      item["eqpId"] = eqpId;
      item["eqpName"] = eqpName;
      item["positionNameAll"] = positionNameAll;
      item["isReplace"] = false;
      return item;
    });
    !!arr?.length && pre.push(...arr);
    return pre;
  }, []);
};

defineExpose({
  initData
});
</script>

<template>
  <div class="detail-list-info">
    <div class="list-info-btns">
      <px-button type="primary" @click="createOrder">创建工单</px-button>
      <px-button type="primary" plain @click="relatedAnalysis">关联分析</px-button>
    </div>
    <div v-loading="loading" class="list-info-table">
      <commonTable
        ref="commonTableRef"
        :key="commonTableKey"
        selection
        :pagination="false"
        :maxHeight="500"
        :tableCloumns="tableCloumns"
        :operationOptions="operationOptions"
        :list="data"
        :row-key="getRowKey"
        :span-method="spanMethod"
        @selection-change="selectionChangeHandler"
      />
    </div>
    <add v-if="isShowAddDialog" v-model="isShowAddDialog" :data="filterData" @submit="submitHandler" />
    <associationAnalysis ref="associationAnalysisRef" />
  </div>
</template>

<style lang="scss" scoped>
.detail-list-info {
  .list-info-btns {
    margin-bottom: 16px;
  }
  // .list-info-table {
  // }
}
</style>
